<template>
  <div style="padding: 14px 0; display: flex">
    <div>
      <div style="
          width: 13px;
          height: 13px;
          border-radius: 7px;
          background-color: #c0c4cc;
          display: block;
          position: relative;
          text-align: center;
        " :style="{
          background: stepColor,
        }"></div>
      <!--连线-->
      <div v-if="!isLast" style="
          height: 100%;
          background-color: #c0c4cc;
          width: 3px;
          margin-left: 5px;
          margin-top: 10px;
        "></div>
    </div>
    <div style="
        padding-left: 20px;
        min-height: 50px;
        display: flex;
        justify-content: space-between;
        width: 90%;
      ">
      <!--内容-->
      <div>
        <div style="
            display: flex;
            padding-left: 0px;
            justify-content: space-between;
          ">
          <div>
            {{
              data.FSO_OperateType == 50 ? data.OperateTypeDesc : data.FRS_Name
            }}
          </div>
          <div style="color: #888">{{ data.FSO_CreateTime }}</div>
        </div>
        <div style="color: #888; margin-top: 5px">
          {{ data.FOC_Name }}{{ data.FRS_ChoiceDesc }}
          {{ data.MultiOpPassTypeDesc }}
          {{ data.FRS_Score ? '[总' + data.FRS_Score + '分]' : '' }}
        </div>
        <div style="color: #888; margin-top: 5px" v-if="data.Actions && data.Actions.length">
          步骤事件：
          <div v-for="(action, aindex) in data.Actions" :key="aindex">
            {{ aindex + 1 }}:【{{ action.BFA_Name }}】
          </div>
        </div>
        <div style="color: #888; margin-top: 5px" v-if="data.ContributionProjects && data.ContributionProjects.length">
          贡献项：
          <div v-for="(item, index) in data.ContributionProjects" :key="index">
            {{ index + 1 }}:【{{ item.CP_Name }}】权重：{{ item.CP_Weight }}
          </div>
        </div>
      </div>
      <div style="display: flex; max-width: 200px; flex-wrap: wrap">
        <div style="
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 10px;
            margin-bottom: 10px;
          " v-for="(choice, cindex) in data.Choices" :key="cindex">
          <div style="
              width: 50px;
              height: 50px;
              border-radius: 5px;
              background-color: #1890ff;
              font-size: 30px;
              color: white;
              line-height: 50px;
              display: block;
              position: relative;
              text-align: center;
            ">
            {{
              choice.FSC_OperatorDesc
                ? choice.FSC_OperatorDesc.substring(0, 1)
                : ''
            }}
          </div>
          <div style="margin-top: 4px; color: #888">
            {{ choice.FSC_OperatorDesc }}
          </div>
        </div>
        <!-- 未到审核节点前显示提示按钮 -->
        <el-button icon="el-icon-plus" v-if="
          (!form.WFM_ID || data.FRS_Index == form.CurStep.FRS_Index + 1) && [6, 7, 8, 10, 11].find((x) => x == data.FRS_OperatorChoice)
        " @click="getChoiceEmployees()" style="width: 50px; height: 50px"></el-button>
      </div>
    </div>
    <el-dialog :visible.sync="chooseEmpVis" title="选择成员" width="60vw" :modal-append-to-body="false" top="70px">
      <div style="height: 68vh">
        <el-row style="height: calc(100% - 100px)">
          <el-col :span="12">
            <div style="color: #888; padding: 0 0 20px 30px">
              成员搜索：
              <el-input placeholder="请输入关键字" v-model="keyword" style="width: 200px; margin-left: 10px"></el-input>
            </div>
            <div style="
                width: 28vw;
                height: 56vh;
                display: block;
                border-right: 1px solid #eee;
                overflow: auto;
              ">
              <div v-for="(emp, eindex) in filterEmps" :key="eindex" style="margin-bottom: 10px">
                <el-checkbox :value="data.Choices &&
                  data.Choices.findIndex(
                    (x) => x.FSC_OperatorID == emp.ECV_TargetID
                  ) != -1
                  " @change="
                    (ischecked) => {
                      empChoose(emp, ischecked)
                    }
                  ">
                  <div style="display: flex; align-items: center">
                    <div style="
                        width: 40px;
                        height: 40px;
                        border-radius: 5px;
                        background-color: #1890ff;
                        display: block;
                        position: relative;
                        text-align: center;
                        margin-right: 20px;
                      ">
                      <!--头像-->
                      <div style="font-size: 20px; color: white; line-height: 40px">
                        {{ emp.USR_Name ? emp.USR_Name.substring(0, 1) : '' }}
                      </div>
                    </div>
                    <div>
                      {{ emp.USR_Name }}
                    </div>
                  </div>
                </el-checkbox>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div style="
                width: 28vw;
                max-height: 60vh;
                display: flex;
                flex-wrap: wrap;
                align-items: start;
                overflow-y: auto;
              ">
              <div v-for="(choice, cindex) in data.Choices" :key="cindex" style="
                  height: 25px;
                  min-width: 65px;
                  padding: 5px 14px;
                  text-align: center;
                  line-height: 25px;
                  border-radius: 4px;
                  margin: 10px;
                  background-color: #eee;
                  cursor: pointer;
                ">
                {{ choice.FSC_OperatorDesc }}
              </div>
            </div>
          </el-col>
        </el-row>
        <div style="display: flex; justify-content: end; padding: 20px 40px">
          <el-button type="primary" @click="chooseEmpVis = false">
            确定
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getChoiceEmployees } from '@/api/flowCenter/form/formProcess'
export default {
  props: ['isLast', 'data', 'form', 'status'],
  data: function () {
    return {
      keyword: null,
      chooseEmpVis: false,
      emps: [],
      filterEmps: [],
    }
  },
  computed: {
    stepColor() {
      return this.data.status == 3
        ? '#abd64a'
        : this.data.status == 2
          ? '#ffcf42'
          : '#c0c4cc'
    },
  },
  watch: {
    keyword(val) {
      this.filterEmps = this.emps.filter((x) => x.USR_Name.includes(val))
    },
  },
  methods: {
    getChoiceEmployees() {
      getChoiceEmployees({
        opChoice: this.data.FRS_OperatorChoice,
        id: this.data.FRS_ChoiceID,
        formDpmId: this.form.WFM_DepartmentId,
      }).then(({ data }) => {
        this.emps = data
        this.filterEmps = data
        this.chooseEmpVis = true
      })
    },
    empChoose(emp, ischecked) {
      if (this.data) {
        if (ischecked) {
          if (!this.data.Choices) this.data.Choices = []
          this.data.Choices.push({
            FSC_FormStepGuid: this.data.FRS_Guid,
            FSC_OperatorDesc: emp.USR_Name,
            FSC_OperatorID: emp.ECV_TargetID,
            IsNew: true
          })
        } else {
          this.data.Choices.splice(
            this.data.Choices.findIndex(
              (x) => x.FSC_OperatorID == emp.ECV_TargetID
            ),
            1
          )
        }
        this.$forceUpdate()
      }
    },
  },
}
</script>

<style scoped>
.step-name {
  font-size: 16px;
  width: 150px;
  line-height: 30px;
}

.detail-title {
  font-size: 16px;
}

.detail-detail {
  width: 300px;
  font-size: 16px;
  word-wrap: break-word;
  word-break: normal;
}
</style>